<!--eslint-disable-->
<template>
    <div class="voltage">
        <svg
            t="1689304312301"
            class="voltage-svg"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1697"
            xmlns:xlink="http://www.w3.org/1999/xlink"
        >
            <path
                d="M683.52 986.88l-117.76-117.76c-30.08-30.08-78.08-30.08-108.16 0L326.4 1000.96c49.92 14.72 103.04 23.04 158.08 23.04 69.76 0 137.6-12.8 199.04-37.12z"
                :fill="element.style.backgroundColor" p-id="1698"></path>
            <path
                d="M512 0C238.08 0 16.64 222.08 16.64 495.36c0 195.84 113.92 365.44 279.04 446.08l162.56-162.56c30.08-30.08 78.08-30.08 108.16 0l162.56 162.56c165.12-80.64 279.04-249.6 279.04-446.08C1007.36 222.08 785.92 0 512 0z m141.44 412.8L540.8 678.4l-0.64 1.92c-6.4 9.6-17.28 16-28.8 16-11.52 0-22.4-6.4-28.8-16l-0.64-1.92-112-265.6c-6.4-14.08 0.64-30.72 15.36-37.12 14.08-6.4 30.72 0.64 37.12 15.36l90.24 213.12 90.24-213.12c6.4-14.08 22.4-20.48 37.12-14.08 13.44 5.12 19.84 21.12 13.44 35.84z m105.6-71.04c-8.32 5.12-19.84 2.56-24.96-6.4C688 260.48 604.8 211.2 511.36 211.2c-93.44 0-175.36 49.28-221.44 123.52-5.12 8.96-17.28 10.88-24.96 5.12-8.32-5.12-10.88-16-5.12-24.32C312.32 231.68 405.76 175.36 512 175.36c106.88 0 200.32 56.96 252.8 141.44 5.12 8.32 3.2 19.2-5.76 24.96z"
                :fill="element.style.backgroundColor" p-id="1699"></path>
        </svg>
        <v-text :prop-value="element.propValue" :element="element" />
    </div>
</template>

<script>
import request from '@/utils/request'
import OnEvent from '../../common/OnEvent'

export default {
    extends: OnEvent,
    props: {
        propValue: {
            type: String,
            required: true,
            default: '',
        },
        request: {
            type: Object,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            cancelRequest: null,
        }
    },
    created() {
        if (this.request) {
            this.cancelRequest = request(this.request, this.propValue, 'data')
        }
    },
    beforeDestroy() {
        this.request && this.cancelRequest()
    },
}
</script>

<style lang="scss" scoped>
.voltage {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    outline: 0;
    margin: 0;
    width: 100%;
    height: 100%;

    .voltage-svg {
        width: 100%;
        height: 100%;
    }

    .v-text {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        width: 50%;
        height: 40%;
    }
}
</style>
